<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq宽高</title>
		<script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
		<style type="text/css">
			html,body{
				margin: 10px;
				border: 5px solid red;
				padding: 20px;
			}
			.parentDiv{
				width: 800px;
				height: 500px;
				margin: 5px auto;
				background: #f60;
				border: 5px dashed green;
				padding: 30px;
				/*position: relative;*/
			}
			.childrenDiv{
				width: 800px;
				height: 300px;
				margin: 50px auto;
				background: yellow;
				border: 5px solid black;
				padding: 5px;
				/*box-sizing: border-box;*/
			}
		</style>
	</head>
	<body>
		<div class="parentDiv">
			<div class="childrenDiv"></div>
		</div>
		<script type="text/javascript">
			//特殊宽高
//			console.log($(window).height());
//			console.log($(document).height());
			
			//innerHeight()
//			console.log($(window).innerHeight());
//			console.log($(document).innerHeight());
			
			//outerHeight()
//			console.log($(window).outerHeight());
//			console.log($(document).outerHeight());
			
			//div宽高
//			console.log($('.childrenDiv').height());//280
//			console.log($('.childrenDiv').innerHeight());//290
//			console.log($('.childrenDiv').outerHeight());//300
//			console.log($('.childrenDiv').outerHeight(true));//400
			
			//css高度
			//console.log($('.childrenDiv').css("height"));
			
			//scrollTop
//			$(window).scroll(function(){
//				console.log($(this).scrollTop());
//			});
			
			//
			console.log($('.childrenDiv').offset().top);//155
			console.log($('.childrenDiv').offset().left);//100
			console.log($('.childrenDiv').position().top);//30
			console.log($('.childrenDiv').position().left);//30
		</script>
	</body>
</html>
